<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<style>
  .material-icons{
    font-size: 72px;
    color: pink;
  }
  .material-icons.num{
    color: pink;
    font-size: 54px;
  }
  .material-icons.num1{
    color: red;
    font-size: 54px;
  }

  .fab{
    width: 72px;
    height: 400px;
    position: fixed;
    right: 50px;
  }
  .fab-btn{
    position: fixed;
    display: flex;
    right: 50px;
  }
  .fab-menu{
    position: fixed;
    display: flex;
    flex-direction: column;
    right: 62px;
    top: 80px;
  }

</style>
<body>
<div class="fab">
  <div class="fab-btn">
    <a href=""><i class="material-icons" id="first">account_circle</i></a>
  </div>
  <div class="fab-menu" style="display: none">
    <a href=""><i class="material-icons num">fingerprint</i></a>
    <a href=""><i class="material-icons num">mediation</i></a>
    <a href=""><i class="material-icons num1">settings_bluetooth</i></a>

  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function () {

    $("#first").mouseenter(function () {
      $("#first").text("remove_circle");
      $(".fab-menu").fadeIn(200);
      $("#first").animate({"rotate":"180deg"},200);
    })
    $(".fab").mouseleave(function () {
      $("#first").text("account_circle");
      $(".fab-menu").fadeOut(200);
      $("#first").animate({"rotate":"0deg"},200);
    })



  })
</script>
</body>
</html>